<template>
	<view class="container">
		<!-- 导航 -->
		<scroll-view class="container-scroll-view" :scroll-y="true">
			<view class="nav_box">
				<div class="city-box" @click="loactionTo">
					<text>北京</text>
					<view class="icon">
						<u-icon color="#FFFFFF" name="arrow-down"></u-icon>
					</view>
				</div>
				<view class="search_box" @click="searchTo">
					<u-search :showAction="false" placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
				</view>
			</view>
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<swiper-item class="swiper-item" v-for="(item,index) in list1" :key="index">
						<view class="swiper-item uni-bg-red">
							<image :src="item" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="order_box">
				<div class="order-box-item" v-for="(item,i) in 4" :key="i">
				</div>
			</view>
			<div class="screen-box">
				<div class="screen-item" @click="sceenclick">
					<text>筛选</text>
					<view class="icon">
						<u-icon name="arrow-down"></u-icon>
					</view>
				</div>
				<div class="screen-item">
					<text>距离</text>
					<view class="icon">
						<u-icon name="arrow-down"></u-icon>
					</view>
				</div>
				<div class="screen-item">
					<text>销量</text>
					<view class="icon">
						<u-icon name="arrow-down"></u-icon>
					</view>
				</div>
				<div class="screen-item">
					<text>价格</text>
					<view class="icon">
						<u-icon name="arrow-down"></u-icon>
					</view>
				</div>
			</div>
			<view :class="popFlag?'filterBox fade-in':'filterBox fade-out'" v-if="popFlag">.
				<view class="filterBox-item">

				</view>
			</view>
			<view class="list-box">
				<view class="list-item" v-for="(item,index) in arr" :key="index" @click="toDetails(item.store_id)">
					<view class="list-item-left">
						<image :src="item.lanhuBg1" mode=""></image>
					</view>
					<view class="list-item-center">
						<view class="center-title">
							<view class="title">
								{{item.lanhutext0}}
							</view>
							<view class="distance" style="margin: 0 20rpx;">
								距离{{item.lanhutext1}}公里
							</view>
							<view class="distance">
								月售{{item.lanhutext2}}
							</view>
						</view>
						<view class="center-box">
							<view class="center-list">
								<view class="group-name">
									团购名：{{item.lanhutext3}}
								</view>
								<view class="group-price">
									团购名：{{item.lanhutext4}}
								</view>
							</view>
							<view class="dashed"></view>
							<view class="center-list">
								<view class="group-name">
									团购名：{{item.lanhutext3}}
								</view>
								<view class="group-price">
									团购名：{{item.lanhutext4}}
								</view>
							</view>
						</view>
					</view>
					<view class="list-item-right">
						<button>团</button>
					</view>
				</view>
			</view>

		</scroll-view>

	</view>
</template>
<script>
	var QQMapWX = require("@/utils/qqmap-wx-jssdk.min");
	var qqmapsdk;
	import {
		merchant_list
	} from "@/api/home.js"
	export default {
		components: {

		},
		data() {
			return {
				popFlag: false,
				arr: [],
				loopData0: [{
						lanhuBg1: 'url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/05e2fb35f8ae4538ba31f7a67f1aa9d4_mergeImage.png)',
						lanhutext0: '夸夫炸串',
						lanhutext1: '1.0',
						lanhutext2: '7000',
						lanhutext3: '抢购',
						lanhutext4: '9.9',
					},

				],
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				city: '北京',
				topBanner: [],
				webViewUrl: null,
				webUrl: 'https://www.bilibili.com/',
				webviewStyles: {
					progress: {
						width: '200rpx',
						height: '200rpx',
						color: '#FF3333'
					}
				},
				longitude: null,
				latitude: null,
				address: ""

			}
		},
		methods: {
			getList() {
				let result = {
					province: '河北省',
					city: '保定市',
					district: '望都县',
					longitude: this.longitude,
					latitude: this.latitude,
					main_business_scope: "",
					classification: "餐饮"

				}
				this.http.post('/merchant_list_api', result).then(res => {
					let result = {
						merchant_dict: res,
						screen_key: "distance",
						reverse: 0,
					}
					this.http.post('/screen_merchant_api', result).then(res => {
						this.arr = res.result
					})
				})
				console.log(this.http, ';2222')
			},
			//筛选弹框
			sceenclick() {
				this.popFlag = !this.popFlag

			},
			loactionTo() {
				uni.navigateTo({
					url: "/pages/location/index"
				})
			},
			searchTo() {
				uni.navigateTo({
					url: "/pages/search/index"
				})
			},
			confirm(res) {
				console.log(res, 'res')
			},
			getLocalCity() {
				let _this = this
				wx.authorize({
					scope: 'scope.userFuzzyLocation',
					success(res) {
						console.log(res)
						if (res.errMsg == 'authorize:ok') {
							wx.getFuzzyLocation({
								type: 'wgs84',
								success(res1) {
									console.log(res1) //此时里面有经纬度
									_this.latitude = res1.latitude
									_this.longitude = res1.longitude
									_this.getList()
								}
							})
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			toDetails(store_id) {
				uni.navigateTo({
					url: `../../../page_business/details?store_id=${store_id}`
				})
			}
		},
		onShow() {
			console.log(getApp().globalData, 'getApp().globalData')
			this.getLocalCity();
			// this.getList()
		},
	}
</script>
<style lang="scss" scoped>
	/* fade-in 动画 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	/* fade-out 动画 */
	@keyframes fadeOut {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.container {
		background: #F9F9F9;
		height: 100%;

		.container-scroll-view {
			height: 100%;
		}
	}

	.nav_box {
		height: 88rpx;
		background: linear-gradient(132deg, #FFB031 0%, #FD7F38 100%);
		display: flex;
		align-items: center;
		padding: 0 20rpx;

		.city-box {
			display: flex;
			justify-content: space-between;

			text {
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.icon {
				margin: 8rpx 0 0 5rpx;
			}
		}

		.search_box {
			width: 482rpx;
			height: 64rpx;
			margin: 0 auto;
		}
	}

	.swiper {
		width: 750rpx;
		height: 330rpx;

		.swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.order_box {
		width: 750rpx;
		height: 160rpx;
		padding: 0 20rpx;
		background: #FFFFFF;
		margin-top: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.order-box-item {
			width: 88rpx;
			height: 88rpx;
			background: #D8D8D8;
			border: 2rpx solid #979797;
		}
	}

	.screen-box {
		position: relative;
		width: 750rpx;
		height: 64rpx;
		background: #FFFFFF;
		margin-top: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;

		.screen-item {
			display: flex;
			align-items: center;

			text {
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}

			.icon {
				margin-left: 5rpx;
			}
		}
	}

	.fade-in {
		animation: fadeIn 0.5s ease-in forwards;
	}

	.fade-out {
		animation: fadeOut 0.5s ease-out forwards;
	}

	.filterBox {
		position: absolute;
		width: 750rpx;
		background: rgba(51, 51, 51, .5);
		z-index: 900;
		height: 100vh;
		touch-action: none;

		.filterBox-item {
			width: 750rpx;
			height: 300rpx;
			background-color: #fff;
			z-index: 999;
			position: absolute;
			top: 0;
		}
	}

	.list-box {
		height: 176rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(211, 211, 211, 0.5);
		border-radius: 14rpx;
		margin: 0 20rpx;
		margin-top: 12rpx;

		.list-item {
			padding: 12rpx;
			display: flex;
			align-items: center;

			.list-item-left {
				width: 152rpx;
				height: 152rpx;
				border-radius: 14rpx;

				image {
					background-color: pink;
					width: 152rpx;
					height: 152rpx;
					border-radius: 14rpx;
				}
			}

			.list-item-center {
				flex: 1;
				margin-left: 20rpx;
				// background-color: silver;

				.center-title {
					display: flex;

					.title {
						font-family: SourceHanSansCN, SourceHanSansCN;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}

					.distance {
						font-family: SourceHanSansCN, SourceHanSansCN;
						font-weight: bold;
						font-size: 24rpx;
						color: #FD7F38;
					}
				}

				.center-box {
					margin-top: 20rpx;
				}

				.center-list {

					display: flex;
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 500;
					font-size: 24rpx;
					color: #222222;

					.group-price {
						margin-left: 100rpx;
					}
				}

				.dashed {
					width: 386rpx;
					height: 2rpx;
					border: 2rpx dashed #D8D8D8;
					margin: 16rpx 0;
				}
			}

			.list-item-right {
				width: 60rpx;
				height: 60rpx;

				button {
					background: #FD7F38;
					border-radius: 12rpx;
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}

			}
		}
	}
</style>